<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #cccccc;
        }
        .click {
            width: 40px;
            height: 40px;
            margin: 150px;
            position: absolute;
        }
        .click p {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: crimson;
            position: absolute;
            animation: move 1s infinite linear;
        }
        .click p:nth-of-type(1) {left: 0;top: 0}
        .click p:nth-of-type(2) {right: 0;top: 0}
        .click p:nth-of-type(3) {right: 0;bottom: 0}
        .click p:nth-of-type(4) {left: 0;bottom: 0}

        .click:nth-of-type(2) {
            transform: rotate(45deg);
        }
        @keyframes move {
            0% {transform: scale(0)}
            50% {transform: scale(1)}
            100% {transform: scale(0)}
        }
        .click:nth-of-type(1) p:nth-of-type(1){ animation-delay: -0.2s}
        .click:nth-of-type(2) p:nth-of-type(1){ animation-delay: -0.4s}
        .click:nth-of-type(1) p:nth-of-type(2){ animation-delay: -0.6s}
        .click:nth-of-type(2) p:nth-of-type(2){ animation-delay: -0.8s}
        .click:nth-of-type(1) p:nth-of-type(3){ animation-delay: -0.9s}
        .click:nth-of-type(2) p:nth-of-type(3){ animation-delay: -1.0s}
        .click:nth-of-type(1) p:nth-of-type(4){ animation-delay: -1.2s}
        .click:nth-of-type(2) p:nth-of-type(4){ animation-delay: -1.4s}
    </style>
</head>
<body>
<div class="click">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
<div class="click">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
</body>
</html>